<template>
    <div>
        <Modal v-model="show" :mask-closable="false" :closable="false" title="权限菜单添加/编辑" @on-cancel="modelCancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="上级菜单" prop="pid_name">
                    <Input v-model="pid_name" placeholder="上一级名称" readonly></Input>
                </FormItem>
                <FormItem label="菜单名称" prop="name">
                    <Input v-model="formValidate.name" placeholder="菜单名称"></Input>
                </FormItem>

                <FormItem label="图标" prop="icon">
                    <Input v-model="formValidate.icon" placeholder="图标"></Input>
                </FormItem>

                <FormItem label="菜单地址" prop="url">
                    <Input v-model="formValidate.url" placeholder="/admin/page"></Input>
                </FormItem>

                <FormItem label="排序" prop="sort">
                    <Input v-model="formValidate.sort" type="number" placeholder="数值越大越在上面"></Input>
                </FormItem>

                <FormItem label="状态" prop="status">
                    <RadioGroup v-model="formValidate.status">
                        <Radio label="1">启用</Radio>
                        <Radio label="2">禁用</Radio>
                    </RadioGroup>
                </FormItem>

                <FormItem label="描述信息" prop="description">
                    <Input v-model="formValidate.description" type="textarea" :autosize="{minRows: 4,maxRows: 5}" placeholder="Enter something..."></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="modelCancel" :loading="loading">取消</Button>
                <Button @click="handleReset('formValidate')" type="warning" style="margin-left: 8px" :loading="loading">重置</Button>
                <Button type="success" @click="handleSubmit('formValidate')" :loading="loading">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { permissionCategoryAddEdit, permissionCategoryInfo } from '@/api/auth'

export default {
  name: 'addEdit',
  props: {
    id: {
      default: 0
    },
    pid: {
      default: 0
    },
    pid_name: {
      default: '顶级菜单'
    },
    show: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      formValidate: {
        name: '',
        pid: 0,
        icon: '',
        url: '',
        description: '',
        sort: 1,
        status: 1
      },
      ruleValidate: {
        name: [
          { required: true, message: '菜单名称必须填写', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '必须填写接口路径', trigger: 'change' }
        ],
        sort: [
          { required: true, message: '请填写栏目排序', trigger: 'blur' },
          { type: 'number',
            message: '请输入数字',
            trigger: 'blur',
            transform (value) {
              return Number(value)
            }
          }
        ]
      },
      loading: false
    }
  },
  created () {
  },
  methods: {
    handleReset (formValidate) {
      this.$refs[formValidate].resetFields()
    },
    handleSubmit (formValidate) {
      this.$refs[formValidate].validate((valid) => {
        if (valid) {
          this.addAndEditData(this.formValidate)
        } else {
          this.$Message.error('数值填写不正确')
        }
      })
    },
    modelCancel () {
      this.$emit('cancelShow')
    },
    addAndEditData (data) {
      this.loadingRun()
      permissionCategoryAddEdit(data).then(ret => {
        this.loadingRun()
        if (ret.data.errcode === 1001) {
          this.modelCancel()
          this.$Message.success('Success!')
        }
      })
    },
    getInfoData (id) {
      permissionCategoryInfo(id).then(ret => {
        if (ret.data.errcode === 1001) {
          this.formValidate = ret.data.data
          if (ret.data.data.pid === '0') {
            this.pid_name = '顶级菜单'
          }
        }
      })
    },
    loadingRun () {
      this.loading = !this.loading
    }
  },
  watch: {
    pid (value) {
      console.log(this.id, '这个是pid的值')
      if (this.id === 0) {
        let initData = {
          name: '',
          pid: this.pid,
          icon: '',
          url: '',
          description: '',
          sort: 0,
          status: 1
        }
        this.formValidate = initData
      }
    },
    id (value) {
      if (this.pid === 0) {
        this.getInfoData(value)
      }
    }
  }
}
</script>

<style scoped>

</style>
